<template>
    <view class="container b-f">
        <!-- 头部背景图 -->
        <view class="dealer-bg">
            <image mode="widthFix" :src="background"></image>
        </view>

        <view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
            <form @submit="formSubmit" :report-submit="true">
                <!-- 提现佣金 -->
                <view class="widget widget__capital m-top20 b-f dis-flex flex-dir-column">
                    <view class="capital__item dis-flex flex-x-between flex-y-center">
                        <view class="item__left">{{ words.withdraw_apply.words.capital.value }}：</view>
                        <view class="item__right c-violet">
                            <text class="f-24">￥</text>
                            <text class="f-34">{{ dealer.money }}</text>
                        </view>
                    </view>
                    <view class="capital__item dis-flex flex-y-center">
                        <view class="item__left">{{ words.withdraw_apply.words.money.value }}：</view>
                        <view class="item__right flex-box">
                            <input name="money" :placeholder="words.withdraw_apply.words.money_placeholder.value" :value="name" />
                        </view>
                    </view>
                </view>
                <!-- 最低提现金额 -->
                <view class="capital__lowest m-top20 f-24 col-7 t-r">{{ words.withdraw_apply.words.min_money.value }}{{ settlement.min_money }}元</view>

                <!-- 提现方式 -->
                <view class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
                    <view class="form__title f-28">提现方式</view>
                    <view class="form__box">
                        <block v-for="(item, index) in settlement.pay_type" :key="index">
                            <block v-if="item == 20">
                                <!-- 支付宝 -->
                                <view class="form__field dis-flex flex-y-center">
                                    <view class="form__radio dis-flex flex-y-center" @tap.stop.prevent="toggleChecked" data-payment="20">
                                        <text :class="'radio__icon ' + (payment == 20 ? 'c-violet' : 'col-bb') + ' iconfont icon-radio'"></text>
                                        <text class="f-28">支付宝</text>
                                    </view>
                                </view>
                                <block v-if="payment == 20">
                                    <view class="form__field dis-flex flex-y-center">
                                        <view class="field-input flex-box">
                                            <input name="alipay_name" placeholder="请输入姓名" />
                                        </view>
                                    </view>
                                    <view class="form__field dis-flex flex-y-center">
                                        <view class="field-input flex-box">
                                            <input name="alipay_account" placeholder="请输入支付宝账号" />
                                        </view>
                                    </view>
                                </block>
                            </block>

                            <block v-if="item == 30">
                                <!-- 银行卡 -->
                                <view class="form__field dis-flex flex-y-center">
                                    <view class="form__radio dis-flex flex-y-center" @tap.stop.prevent="toggleChecked" data-payment="30">
                                        <text :class="'radio__icon ' + (payment == 30 ? 'c-violet' : 'col-bb') + ' iconfont icon-radio'"></text>
                                        <text class="f-28">银行卡</text>
                                    </view>
                                </view>
                                <block v-if="payment == 30">
                                    <view class="form__field dis-flex flex-y-center">
                                        <view class="field-input flex-box">
                                            <input name="bank_name" placeholder="请输入姓名" value="" />
                                        </view>
                                    </view>
                                    <view class="form__field dis-flex flex-y-center">
                                        <view class="field-input flex-box">
                                            <input name="bank_account" placeholder="请输入开户行名称/地址" value="" />
                                        </view>
                                    </view>
                                    <view class="form__field dis-flex flex-y-center">
                                        <view class="field-input flex-box">
                                            <input name="bank_card" placeholder="请输入银行卡号" value="" />
                                        </view>
                                    </view>
                                </block>
                            </block>
                        </block>
                    </view>
                </view>
                <!-- 提交申请 -->
                <view class="form-submit dis-flex flex-x-center">
                    <button formType="submit" :disabled="disabled">{{ words.withdraw_apply.words.submit.value }}</button>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            isData: false,

            words: {
                withdraw_apply: {
                    words: {
                        capital: {
                            value: ''
                        },

                        money: {
                            value: ''
                        },

                        money_placeholder: {
                            value: ''
                        },

                        min_money: {
                            value: ''
                        },

                        submit: {
                            value: ''
                        }
                    }
                }
            },

            payment: 20,
            disabled: false,
            background: '',

            dealer: {
                money: ''
            },

            name: '',

            settlement: {
                min_money: '',
                pay_type: []
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取分销商提现信息
        this.getDealerWithdraw();
    },
    methods: {
        /**
         * 获取分销商提现信息
         */
        getDealerWithdraw: function () {
            let that = this;
            app.globalData._get('dealer/withdraw', {}, function (result) {
                let data = result.data;
                data.isData = true;
                // 设置当前页面标题
                uni.setNavigationBarTitle({
                    title: '代理中心'
                    //title: data.words.withdraw_apply.title.value
                });
                //  默认提现方式
                //data['payment'] = data.settlement.pay_type[0];
                data['payment'] = data.settlement.pay_type.enumer_ation;
                that.setData(data);
            });
        },

        /**
         * 提交申请
         */
        formSubmit: function (e) {
            let that = this;
            let values = e.detail.value;
            let words = that.words.withdraw_apply.words; // 记录formId
            app.globalData.saveFormId(e.detail.formId);

            // 验证可提现佣金
            if (that.dealer.money <= 0) {
                app.globalData.showError('当前没有' + words.capital.value);
                return false;
            }
            // 验证提现金额
            if (!values.money || values.money.length < 1) {
                app.globalData.showError('请填写' + words.money.value);
                return false;
            }
            // 按钮禁用
            that.setData({
                disabled: true
            });
            // 提现方式
            values['pay_type'] = that.payment;
            // 数据提交
            app.globalData._post_form(
                'withdraw/submit',
                {
                    data: JSON.stringify(values)
                },
                function (result) {
                    // 提交成功
                    // console.log(result);
                    app.globalData.showError(result.msg, function () {
                        uni.navigateTo({
                            url: '../list/list'
                        });
                    });
                },
                null,
                function () {
                    // 解除按钮禁用
                    that.setData({
                        disabled: false
                    });
                }
            );
        },

        /**
         * 切换提现方式
         */
        toggleChecked: function (e) {
            this.setData({
                payment: e.currentTarget.dataset.payment
            });
        }
    }
};
</script>
<style>
@import './apply.css';
</style>
